<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import useTable from '@/hooks/table';
  import dayjs from 'dayjs';
  import { MpCard } from '@/types/mp';
  import { Modal } from '@arco-design/web-vue';
  import { pinMpCard, deleteMpCard, getMpCardList } from '@/api/mp';
  import MpCardEditor from './editor.vue';

  const props = defineProps<{
    posType: string;
  }>();

  const { loading, list } = useTable<MpCard>();

  const getData = async () => {
    loading.value = true;
    try {
      const res = await getMpCardList({
        posType: props.posType,
      });
      list.value = res?.data?.data || [];
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    getData();
  });

  const pinRecord = async (card: MpCard) => {
    await pinMpCard(card.id);
    getData();
  };

  const deleteRecord = async (card: MpCard) => {
    Modal.confirm({
      title: '提示',
      content: '确定删除？',
      onOk: async () => {
        await deleteMpCard(card.id);
        getData();
      },
    });
  };

  const editorConfig = ref<{
    editing: boolean;
    card: Partial<MpCard>;
  }>({
    editing: false,
    card: {},
  });
  const beginEdit = (mpCard: Partial<MpCard>) => {
    editorConfig.value = {
      editing: true,
      card: mpCard,
    };
  };
  const editDone = (refresh: boolean) => {
    editorConfig.value = {
      editing: false,
      card: {},
    };
    if (refresh) {
      getData();
    }
  };

  const title = computed(() => {
    if (props.posType === 'BANNER') {
      return '首页焦点图';
    }
    if (props.posType === 'SPONSOR') {
      return '赞助商';
    }
    if (props.posType === 'LATEST') {
      return '“最新”配置';
    }
    if (props.posType === 'CMS') {
      return '学院首页配置';
    }
    return '-';
  });
</script>

<template>
  <div style="padding: 20px">
    <a-row :gutter="[20, 20]">
      <a-col class="card">
        <a-card :title="title" :bordered="false">
          <template #extra>
            <a-button type="primary" @click="beginEdit({})">
              <template #icon><icon-plus /></template>
              新建
            </a-button>
          </template>
        </a-card>
      </a-col>

      <a-col>
        <a-card :bordered="false">
          <a-table
            :bordered="{ cell: true }"
            :data="list"
            :loading="loading"
            :pagination="false"
          >
            <template #columns>
              <a-table-column title="图片" :width="300">
                <template #cell="{ record }">
                  <div class="thumb">
                    <img :src="record.pic" />
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="名称" data-index="title"></a-table-column>
              <a-table-column title="创建时间" :width="200">
                <template #cell="{ record }">
                  {{ dayjs(record.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
                </template>
              </a-table-column>
              <a-table-column
                title="操作"
                :width="200"
                fixed="right"
                align="center"
              >
                <template #cell="{ record }">
                  <a-space>
                    <a-link @click="pinRecord(record)">置顶</a-link>
                    <a-link @click="beginEdit(record)">编辑</a-link>
                    <a-link @click="deleteRecord(record)">删除</a-link>
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <MpCardEditor
      v-if="editorConfig.editing"
      :pos-type="posType"
      :mp-card="editorConfig.card"
      @close="editDone"
    />
  </div>
</template>

<style lang="less" scoped>
  .card {
    &:deep(.arco-card-body) {
      display: none;
    }
    &:deep(.arco-card-header) {
      border-bottom: none;
    }
  }

  .thumb {
    width: 300px;
    height: 200px;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
</style>
